<template>
  <div class="Main wh">
    <el-container class="wh">
      <!-- 左侧导航 -->
<!--      <el-aside width="auto" class="el-aside">
        <m-menu
          :logo="isCollapse ? logo : logoText"
          title=""
          :is-collapse.sync="isCollapse"
        ></m-menu>
      </el-aside>-->
      <el-container class="">
        <!-- 顶部导航 -->
        <el-header class="el-header" height="48px">
          <div class="el-header-main"
               v-show="!['/home/ipDetail','/home/domainDetail',
               '/home/mySqlDetail', '/source/customSource','/home/mySqlDetailTwo'].includes($route.path)">
            <span class="sumTitle">威胁情报</span>
            <m-menu-horizontal></m-menu-horizontal>
          </div>
          <div class="el-header-main" v-show="['/home/ipDetail','/home/domainDetail','/home/mySqlDetail','/home/mySqlDetailTwo'].includes($route.path)">
            <span class="el-icon-back" v-if="['/home/mySqlDetailTwo'].includes($route.path)" @click="$router.go(-1)"></span>
            <span class="el-icon-back" v-if="!['/home/mySqlDetailTwo'].includes($route.path)" @click="$router.push({path: '/home'})"></span>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item style="color: #A1A7B3"><span class="cursor" @click="$router.push({path: '/home'})">首页</span></el-breadcrumb-item>
              <el-breadcrumb-item>{{$route.query.value}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="el-header-main" v-show="['/source/customSource'].includes($route.path)">
            <span class="el-icon-back" @click="$router.go(-1)"></span>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item style="color: #A1A7B3"><span class="cursor" @click="$router.push({path: '/source'})">情报源接入</span></el-breadcrumb-item>
              <el-breadcrumb-item>自定义情报</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!--<tags-view class="tags-view"></tags-view>-->
        </el-header>

        <el-main class="el-main">
          <transition name="el-fade-in-linear">
            <keep-alive :include="cachedViews">
              <router-view class="el-main-view" :key="key"></router-view>
            </keep-alive>
          </transition>
        </el-main>
        <!--        <el-footer class="el-footer">-->
        <!--          <MyFooter></MyFooter>-->
        <!--        </el-footer>-->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader/MyHeader";
import MyFooter from "@/components/MyFooter/MyFooter";
import config from "@/config";

export default {
  name: "MainView",
  data() {
    return {
      logoText: require("../../../public/logo-text.png"),
      logo: require("../../../public/logo.png"),
      title: config.projectName,
      isCollapse: false,
    };
  },
  components: {
    MyHeader,
  },
  computed: {
    key() {
      return this.$route.name;
    },
    cachedViews() {
      return this.$store.state.MUI.tagsView.cachedViews;
    },
  },
  mounted() {
    console.log("store", this.$store.state);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";

.Main {
  background-color: #f7f9fc;
  font-size: px2(14);
  .el-header {
    background-color: #fff;
    //border-bottom:1px solid $borderColor;
    padding: 0 !important;
    .el-header-main {
      padding: 0 $gap;
      height: px2(48);
      box-shadow: 0px 1px 4px 0px rgba(30, 35, 43, 0.1);
      display: flex;
      flex-wrap: nowrap;
      justify-content: start;
      align-items: center;
      .sumTitle {
        width: px2(80);
        font-size: px2(14);
        font-weight: bold;
        color: $fontColorW;
        display: inline-block;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: px2(1);
          height: px2(16);
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          background-color: #e1e5eb;
        }
      }
    }
    .tags-view {
      width: 100%;
      position: relative;
    }
  }
  .el-footer {
    background-color: #fff;
    border-top: 1px solid $borderColor;
  }
  .el-aside {
  }

  .el-main {
    padding: px2(9) px2(17);
    overflow: auto;
    position: relative;
    .el-main-view {
      //min-width: 100%;
      min-width: px2(1200);
      min-height: 100%;
      background-color: #fff;
      box-shadow: 0px px2(1) px2(4) 0 rgba(30, 35, 43, 0.1);
    }
  }
}
.el-icon-back{
  color: #5E6573;
  font-size: px2(16);
  margin-right: px2(18);
  cursor: pointer;
}
::v-deep .el-breadcrumb__inner{
  color: #A1A7B3;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
color: #2F3540 !important;
}
</style>
